<template>
	<div style="border:1px solid #e0e0e0">
		<!-- <div>{{ node.name }}</div> -->
		<div>
			<a-button
				v-if="node.status === 0"
				type="primary"
				danger
				@click="showFlowModel(node)"
			>待审核</a-button>
			<a-button
				v-else-if="node.status === 1"
				disabled
			>审核中</a-button>
			<a-button
				v-else-if="node.status === -1"
				type="primary"
				danger
				@click="showFlowModel(node)"
			>已退回</a-button>
			<a-button
				v-else-if="node.status === 2"
				type="primary"
				danger
				@click="showFlowModel(node)"
			>完成</a-button>
		</div>
		<a-modal
			v-model:visible="visibleFlowModel"
			:width="600"
			:title="`${formState2.key ? '修改申请' : '审批'}`"
			@ok="updateStatus"
		>
			<a-form
				ref="formRef2"
				:model="formState2"
				v-bind="{labelCol: { style: { width: '100px' } }}"
			>

				<a-form-item
					label="审批状态"
					name="status"
					:rules="{required:true, message:'选择审批状态'}"
				>
					<a-radio-group
						v-model:value="formState2.status"
						button-style="solid"
					>
						<a-radio
							v-for="item in flowStatus"
							:key="item.status"
							:value="item.status"
						>{{ item.name }}</a-radio>
						<!-- <a-radio value="-1">拒绝</a-radio> -->
						<!-- <a-radio-button value="d">提交给其他角色</a-radio-button> -->
					</a-radio-group>

				</a-form-item>
				<template v-if=" formState2.status === 1 ">
					<a-form-item
						label="转交其他角色"
						name="role_ids"
						:rules="{required:false, message:'请选择角色'}"
					>
						<a-checkbox-group
							v-model:value="formState2.role_ids"
							style="width: 100%"
						>
							<a-row>
								<a-col
									v-for=" item in roles"
									:key="item.id"
									:span="8"
								>
									<a-checkbox
										v-if="item.id != formState2.role_id"
										:value="item.id"
										:checked="false"
									>{{ item.name }}</a-checkbox>
								</a-col>
							</a-row>
						</a-checkbox-group>
					</a-form-item>
				</template>
				<a-form-item
					label="备注"
					name="remark"
				>
					<a-input v-model:value="formState2.remark" />
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
/**
 * 废弃
 * 项目节点状态操作
 */
import { ref, watch, onMounted, getCurrentInstance } from "vue";
import { post, treeToList } from "../utils";
import { useRequest } from "vue-request";
import router from "../router";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const roles = ref();
const roleIdx = ref(0);
const flowStatus = ref();
const flowSource = ref({});
const flowNodes = ref([]);
flowStatus.value = [
	{ status: -1, name: "退回修改" },
	{ status: 0, name: "待审批" },
	{ status: 1, name: "审批通过" },
	{ status: 2, name: "审批完成" },
];
const props = defineProps({
	flowId: {
		type: Number,
		required: true,
		default: 0,
	},
	// code: {
	// 	type: String,
	// 	required: true,
	// 	default: ""
	// },
	// defaultExpandAll: {
	// 	type: Boolean,
	// 	required: true,
	// 	default: true
	// }
});
onMounted(async () => {
	// console.log(props);
	if (props.flowId !== 0) {
		run();
	}
});
const run = () => {
	post("flow/info", { id: props.flowId }).then((data) => {
		roles.value = data.flowType.roles;
		flowSource.value = data;
		var idx = 0;
		flowNodes.value = data.flowNodes.filter((e) => {
			idx++;
			e.idx = idx;
			e.update_time = dayjs(e.update_time).format("YYYY-MM-DD HH:mm:ss");
			return e;
		});
		if (idx > 0) {
			let i = 0;
			for (i in roles.value) {
				if (flowNodes.value[idx - 1].id === roles.value[i].id) {
					roleIdx.value = i + 1;
				}
			}
		}
		// console.log(flowSource.value)
	});
};
watch(props.flowId, (value) => {
	console.log(value);
	// if (props.flowId !== 0) {
	// 	run();
	// }
});
watch(flowNodes, (value) => {
	for (const i in roles.value) {
		roles.value[i].flowNodes = value.filter((d) => {
			if (d.role_id === roles.value[i].id) {
				return d;
			}
		});
		if (roles.value[i].flowNodes.length > 0) {
			roles.value[i].status =
				roles.value[i].flowNodes[
					roles.value[i].flowNodes.length - 1
				].status;
		}
	}
	// roles.value.filters(res => {
	// 	res.flowNodes = value.map(d => {
	// 		return d
	// 	});
	// 	// if (res.id === value.role_id) {
	// 	// 	res.flowNodes =
	// 	// }
	// })
	// console.log(roles.value);
	// const { name } = searchState;
	// if (name) expandedRowKeys.value = treeToList(JSON.parse(JSON.stringify(value))).map(d => d.id);
});
const visibleFlowModel = ref(false);
const formRef2 = ref();
const formState2 = ref({});
const showFlowModel = (record) => {
	formState2.value = { ...record };
	visibleFlowModel.value = true;
};
const initData = () => {
	run();
};
const updateStatus = () => {
	console.log("updateStatus");
	formRef2.value
		.validate()
		.then(() => {
			proxy.$message.destroy();

			const params = { ...formState2.value };
			if (params.role_ids) {
				params.role_ids = params.role_ids.join(",");
			}
			post("flow/updateStatus", params)
				.then(() => {
					proxy.$message.success("更新成功", 1);
					visibleFlowModel.value = false;

					initData();
				})
				.catch((err) => {
					proxy.$message.error(err);
				});
		})
		.catch((err) => {
			console.log(err);
		});
};
watch(visibleFlowModel, (value) => {
	if (value) formRef2.value?.clearValidate();
});
// run();
</script>